import React, {Component} from 'react';
import {connect} from 'react-redux';
import {fetchNewsLists, fetchNewsClassify} from '../../actions/newsAction';
import NavLink from '../NavLink';
class News extends Component {
    constructor() {
        super();
        this.state = {
            dataSource: ""
        };
    }
    getTarget(e){
        var typeId=e.target.getAttribute('data-typeId');
        console.log(typeId)
        var params="typeId="+typeId;
        this
        .props
        .fetchNewsLists(params);
        this.setState({dataSource:params})
    }
    changePage(e){
        const page = e.target.getAttribute('data-page');
        const typeId=this.state.dataSource;
        const params = "page="+page+'&'+typeId;
        this.props.fetchNewsLists(params)
    }
    componentWillMount() {
        this
            .props
            .fetchNewsClassify();
        this
            .props
            .fetchNewsLists();
    }
    render() {
        //获取新闻分类
        const newsClassify = this.props.newsClassify;
        if (newsClassify) {
            var classifyArr = [];
            let len = newsClassify.length;
            for (let i = 0; i < len; i++) {
                classifyArr.push(
                    <li key={newsClassify[i]._id}>
                       <a href="javascript:void(0)" onClick={ (e)=>this.getTarget(e)} data-typeId={newsClassify[i]._id}> {newsClassify[i].title}</a>
                    </li>
                )
            }
        
        }
        //获取新闻
        const newsLists = this.props.newsLists.rows;
        if (newsLists&&newsLists.length>0) {
            var listsArr = [];
            let len = newsLists.length;
            for (let i = 0; i < len; i++) {
                    listsArr.push(
                        <div className="col-lg-4" key={newsLists[i]._id}>
                        <img
                          className="img-circle"
                          src={`http://localhost:3000/${newsLists[i].imgObject.filename}`}
                          alt="Generic placeholder image"
                          width="140"
                          height="140"/>
                          {/* <Link to={{pathname:"/news",query:{newsId:newsLists[i]._id}, state:{data:newsLists[i].typeId} }}/> */}

                        <NavLink to={{pathname:"/news/"+newsLists[i]._id,state:{data:newsLists[i].typeId} }}>
                          <h2>{newsLists[i].title}</h2>
                        </NavLink>
                        <NavLink to={{pathname:"/news/"+newsLists[i]._id,state:{data:newsLists[i].typeId} }}>
                        <div className='text_slice'>
                          <div
                            dangerouslySetInnerHTML={{
                            __html: newsLists[i].content
                          }}></div>
                          </div>
                        </NavLink>
                      </div>
                    )
                }
        }else{
            return(
                <div>
                <ul className="nav nav-pills">
                <li>
                <a href="javascript:void(0)" onClick={ (e)=>this.getTarget(e)} data-typeId=''> 全部新闻</a>
             </li>
                    {classifyArr}
                    </ul>
                    <div className="container marketing">
                    <div className="row">
                       <div>未获取到数据  请刷新重试</div>
                    </div>
                    </div>
                </div>
            )
        }
        const pages= this.props.newsLists.pages
        var outputPages = [];
        if(newsLists){
            var len=pages;
            for(var i=1;i<=len;i++){
                outputPages.push(
                    <li key={i}><a href="javascript:void(0)" onClick={ (e)=>this.changePage(e) } data-page={i} >{i}</a></li>
                )
            }
        }
        return (
            <div>
                <ul className="nav nav-pills">
                <li>
                <a href="javascript:void(0)" onClick={ (e)=>this.getTarget(e)} data-typeId=''  style={{color:'red'}}> 全部新闻</a>
             </li>
                {classifyArr}
                    </ul>
                <div className="container marketing">
                    <div className="row">
                        {listsArr}    
                    </div>
                    <nav aria-label="..." id="pageNav">
                        <ul className="pagination" id="pageUl">
                            {outputPages}
                        </ul>
                    </nav>
                    
                </div>
            </div>
        )
    }
}
const getValue = (state) => {
    return {newsLists: state.newsReducer.newsLists, newsClassify: state.newsReducer.newsClassify}
}
const newsContext = connect(getValue, {fetchNewsLists, fetchNewsClassify})(News)
module.exports = newsContext;